<route lang="json5" type="page">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '我的',
  },
}
</route>

<template>
    <view class="info">
        <view>
            <wd-img width="140rpx" height="140rpx"
                :src="store.member.avatar && store.member.avatar.url ? store.member.avatar.url : avatar" enable-preview
                mode="aspectFill" round class="profile" />
            <view class="name">
                <view>{{ store.member.name }}</view>
                <view>账号：{{ mobileHide(store.member.mobile) }}</view>
            </view>
        </view>
        <view class="info_icon">
            <view class="i-carbon-settings" @click="goTo('/pages/my/setting')"></view>
            <wd-badge :modelValue="store.notice_unread" :max="99" @click="goTo('/pages/my/notice/index')">
                <view class="i-carbon-chat"></view>
            </wd-badge>

        </view>
    </view>
    <view class="collect">
        <view>商品收藏 0</view>
        <text></text>
        <view>信息收藏 0</view>
        <text></text>
        <view>店铺收藏 0</view>
    </view>
    <item column title="线上购物订单" class="grid_box" padding="20rpx 0">
        <wd-grid :column="5">
            <wd-grid-item v-for="item, index in online_order" :key="index" :text="item.title" use-icon-slot
                icon-size="80rpx">
                <template #icon>
                    <image :src="item.icon" mode="scaleToFill" class="grid_icon" />
                </template>
            </wd-grid-item>
        </wd-grid>
    </item>

    <item column title="到店核销订单" class="grid_box" padding="20rpx 0">
        <wd-grid :column="5">
            <wd-grid-item v-for="item, index in offline_order" :key="index" :text="item.title" use-icon-slot
                icon-size="80rpx">
                <template #icon>
                    <image :src="item.icon" mode="scaleToFill" class="grid_icon" />
                </template>
            </wd-grid-item>
        </wd-grid>
    </item>

    <item column title="我的地盘" class="grid_box" padding="20rpx 0">
        <wd-grid :column="5">
            <wd-grid-item v-for="item, index in more" :key="index" :text="item.title" use-icon-slot icon-size="80rpx">
                <template #icon>
                    <image :src="item.icon" mode="scaleToFill" class="grid_icon" />
                </template>
            </wd-grid-item>
        </wd-grid>
    </item>
</template>

<script lang="ts" setup>
import avatar from '/static/images/avatar.png';
import { mobileHide } from '@/utils'
import { useStore } from '@/utils/store'
import online_order0 from "/static/images/mp2.png";
import online_order1 from "/static/images/usericon1.png";
import online_order2 from "/static/images/usericon2.png";
import online_order3 from "/static/images/usericon3.png";
import online_order4 from "/static/images/usericon4.png";

import offline_order0 from "/static/images/mm1.png";
import offline_order1 from "/static/images/mm2.png";
import offline_order2 from "/static/images/mm3.png";
import offline_order3 from "/static/images/mm4.png";
import offline_order4 from "/static/images/mm5.png";

import more0 from "/static/images/addr.png";
import more1 from "/static/images/customer_service.png";
import more2 from "/static/images/agreement.png";
import { goTo } from '@/utils/url';
const store = useStore()
onShow(() => {
    store.setMemberData()
})

const online_order = reactive([
    { icon: online_order0, title: '全部' },
    { icon: online_order1, title: '待付款' },
    { icon: online_order2, title: '待发货' },
    { icon: online_order3, title: '待收货' },
    { icon: online_order4, title: '待评价' },
])

const offline_order = reactive([
    { icon: offline_order0, title: '全部' },
    { icon: offline_order1, title: '待付款' },
    { icon: offline_order2, title: '待发货' },
    { icon: offline_order3, title: '待收货' },
    { icon: offline_order4, title: '待评价' },
])

const more = ref([
    { icon: more0, title: '收货地址' },
    { icon: more1, title: '联系平台' },
    { icon: more2, title: '会员协议' },
])
</script>
<style lang="scss" scoped>
:deep(.wd-badge__content.is-fixed) {
    transform: translateY(-40%) translateX(14%)
}

.info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.info>view {
    display: flex;
}

.name {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.name>view:first-child {
    font-size: 36rpx;
    font-weight: bold;
}

.name>view:last-child {
    font-size: 28rpx;
    color: #333;
}

.profile {
    margin-right: 20rpx;
    background: wheat;
}

.info_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 140rpx;
    font-size: 34rpx;
    color: #666;
}

.collect {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 20rpx 0;
    font-size: 28rpx;
}

.collect>text {
    width: 2rpx;
    height: 26rpx;
    background: #c3c3c3;
}

.grid_box :deep(.title) {
    margin-left: 26rpx;
}

:deep(.wd-grid-item__content) {
    padding: 10rpx 0 20rpx;
}

.grid_icon {
    width: 80rpx;
    height: 80rpx;
}
</style>
